Skip to content
标签
cms
headless-cms
strapi
devops
字数
1328 字
阅读时间
6 分钟

什么是 "Headless" (无头)?

在计算机领域,“无头”(Headless)通常指代没有图形用户界面(GUI)的软件。

  • 无头浏览器 (Headless Browser): 指没有图形界面的浏览器,可以通过编程接口模拟用户交互,常用于自动化测试、网络爬虫、页面截图等。
  • 无头 UI (Headless UI): 指不提供可视化界面、只提供功能和逻辑的 UI 组件库。

这个概念的核心在于前后端分离:将“头”(前端/表现层)与“身体”(后端/内容层)分离开。

传统 CMS 的背景与局限

在理解 Headless CMS 之前,我们先回顾一下传统的 CMS (Content Management System,内容管理系统)。

典型的例子如 WordPress,它通常包含两大部分:

  1. 内容管理后台: 用于创建、存储和管理网站内容(如文章、图片、媒体资源)。
  2. UI 展示前端: 一个集成的网站界面,用于向用户展示内容,通常支持主题和插件来自定义外观。

传统 CMS 的局限性

  1. 内容模型固化: 内容大多围绕着“网页”构建,如文章、页面、媒体等,难以灵活扩展到其他内容类型(例如:APP 的配置、IoT 设备的数据)。
  2. 分发渠道单一: 内容与前端展示紧密耦合,主要为网页设计。如果想将同样的内容发布到手机 App、小程序、智能手表等多个平台,通常需要复杂的改造或为每个渠道单独维护内容。

为了解决这些问题,Headless CMS 应运而生。

Headless CMS 概述

Headless CMS 是一种只负责内容管理的后端系统。它将内容通过 API(如 RESTful API 或 GraphQL)提供给任何需要的前端应用,而不关心内容最终如何展示。

它剥离了传统 CMS 的“头”(前端展示层),只保留了“身体”(内容仓库和管理后台)。

优势与劣势

优势

  • 灵活性: 你可以自由定义内容的数据模型,不受限于传统的“文章”、“页面”模式。
  • 全渠道发布: “一次创建,随处发布”。同一份内容可以轻松地分发到网站、App、小程序、数字标牌等任何前端。
  • 技术栈自由: 前端开发者可以使用任何他们喜欢的技术栈(如 React, Vue, Svelte, Swift, Kotlin)来构建用户体验。

劣势

  • 需要自建前端: 最大的“缺点”是你需要自己从零开始构建或集成前端展示层,这带来了额外的工作量。

Headless CMS 工作流程示例

以下内容转载自腾讯云社区文章 headless cms,无头CMS?,它以一个名为【微言码道】的网站为例,清晰地展示了 Headless CMS 的使用流程。


案例:使用 Headless CMS 管理多类型内容

假设【微言码道】网站需要发布文章、视频、音频和开源项目等多种内容。如果使用传统 CMS,这些不同类型的内容可能都得用“文章”的形式来承载,但这并不合适。

以视频为例,它有名称、类别、描述、播放地址、封面、时长等多个专属属性。使用 Headless CMS,我们可以这样处理:

1. 定义数据模型

首先,在 Headless CMS 后台为“视频”创建一个自定义的数据模型,并为其添加所需的字段。

定义视频数据模型

2. 录入内容数据

模型定义好后,内容创作者就可以在后台方便地录入具体的视频数据。

录入视频数据

3. 通过 API 访问内容

Headless CMS 会自动为创建的内容生成 API 端点。前端应用可以通过这些 API 来获取数据。通常还包含完整的增删改查(CRUD)功能和权限控制。

自动生成的 API

4. 构建前端 UI

有了 API,前端就只剩下纯粹的展示工作。开发者可以自由选择技术栈(如 Gatsby.js)和设计风格来构建 UI,并从 Headless CMS 获取内容进行渲染。

自定义的前端 UI

这种方式下,UI 和内容彻底分离。未来如果想开发 App 或小程序,只需再次调用相同的 API 即可,无需重复管理内容。


典型用例:Strapi

Strapi 是一个流行的开源 Headless CMS,它允许开发者快速构建可定制的 API。如果你想了解更多,可以参考这篇笔记:strapi使用

参考

贡献者

The avatar of contributor named as jiechen jiechen

页面历史

撰写